<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>iReader for web</title>
        <script language="javascript" type="text/javascript" src="js/jfocus.js"></script>
        <script language="javascript" type="text/javascript" src="js/jfocus.system.tween.js"></script>
        <script language="javascript" type="text/javascript" src="js/jfocus.system.ui.js"></script>
        <script language="javascript" type="text/javascript" src="js/ImageView.js"></script>

		<script language="javascript" type="text/javascript" src="js/bookshelf.storage.js"></script>
        
		<style type="text/css">
            body
            {
                background-color:Black;
                width:800;
                height:1138;
                margin:auto;
                overflow:auto;
            }
        </style>
    </head>

    <body>
    	
    	<div id="book_shelf">
        </div>
       
    	<script language="javascript" type="text/javascript">
		
			initLocalStorage();
		
			var application = $jf.startup(30);
			application.addEventListener($jf.type.Event.LOAD,applicationLoadHandler);
			application.addEventListener($jf.type.Event.RESIZE, applicationResizeHandler);
			application.addEventListener($jf.type.MouseEvent.MOUSE_DOWN, applicationMouseDownHandler);

			
			
			var panel1Job = null;
			//var panel2Job = null;
			var iconJob = null;
			
			var selectedIndex = 0;
			var curMouseX = 0;
			var mouseDownX = 0;
			var directFlag = 0; //方向表示 >0为右， <0为左。
			var curPic = null;
			
			var backgroundImageView = new ImageView("backgroundImageView");
			var backgroundImageWidth = 800;
			var backgroundImageHeight = 1138;
			var panelView1 = $jf.sprite("book_shelf");
			panelView1.contentSelectable(false);
			var editView = $jf.sprite("book_edit");
			editView.contentSelectable(false);
			
			var bookListView = $jf.sprite("bookListView");
			bookListView.contentSelectable(false);
			
			var bookcityView = new ImageView("book_city");
			var glassPanel = $jf.sprite("glassPanel");
            glassPanel.style("backgroundColor","black");
            
			var picViewer = new ImageView("picVIewer");
			var contentView = new ImageView("contentView");
			var btnCloseView = new ImageView("btnCloseView");
			var editBookView = new ImageView("editBookView");
			var isEditModel = false;
			
			function layoutShowBooksView(){
				
				var storage = window.localStorage;
				var bookShelfStr = storage.getItem("bookShelf");
				var booksArr = bookShelfStr.split(',');
				var len = booksArr.length - 1;
			
				var lineCount = parseInt(len/5);
				var column = 0;

				for(var line=0; line <= lineCount; line++){
					if(line == lineCount){
						column = len - (line * 5);
					}else{
						column = 5;
					}
					for(var i=0; i < column; i++){
						var book = new ImageView("book"+(line * 5 + i));
						book.addEventListener($jf.type.MouseEvent.CLICK,imageClickHandler);
						book.url("books/"+booksArr[line * 5 + i]);
						book.x(i * 148);
						book.y(line * 185);
						book.width(106);
						book.height(151);
						panelView1.addChild(book);
					}
				}    
			}
			
			/**
				应用程序加载完成事件
				@param event 事件对象
			 **/
			function applicationLoadHandler(event){
				backgroundImageView.url("image/bookshelf.png");
				backgroundImageView.width(backgroundImageWidth);
				backgroundImageView.height(backgroundImageHeight);
				backgroundImageView.x((application.width() - backgroundImageView.width()) / 2);
				backgroundImageView.y(0);
				application.addChild(backgroundImageView);
				
				panelView1.width(backgroundImageWidth);
				panelView1.height(backgroundImageHeight);
				panelView1.x(50);
				panelView1.y(135);
				layoutShowBooksView();
				backgroundImageView.addChild(panelView1);
				
				// edit books
				
				editBookView.addEventListener($jf.type.MouseEvent.CLICK,editBookClickHandler);
				editBookView.url("image/btn_edit_normal.png");
				editBookView.x(5);
				editBookView.y(5);
				editBookView.width(100);
				editBookView.height(54);
				backgroundImageView.addChild(editBookView);
				
				// goto bookcity
				var btnGotoBookCity = new ImageView("btnGotoBookCity");
				btnGotoBookCity.addEventListener($jf.type.MouseEvent.CLICK,gotoBookCityClickHandler);
				btnGotoBookCity.url("image/goto_bookcity_normal.png");
				btnGotoBookCity.x(backgroundImageWidth - 127);
				btnGotoBookCity.y(5);
				btnGotoBookCity.width(123);
				btnGotoBookCity.height(54);
				backgroundImageView.addChild(btnGotoBookCity);
				
			}
			
			/**
				屏幕拉伸事件
				@param event 事件对象
			 **/
			function applicationResizeHandler(event){

				backgroundImageView.x((application.width() - backgroundImageView.width()) / 2);
				backgroundImageView.y(0);
				
				glassPanel.width(application.width());
				glassPanel.height(application.height());
				glassPanel.x(0);
				glassPanel.y(0);
				
			}
			
			
			/**
				鼠标按下事件
				@param event 事件对象
			 **/
			function applicationMouseDownHandler(event){
				/*
				if(!application.contains(glassPanel)){
					//在不显示图片详情时允许拖动面板
					mouseDownX = event.stageX;
					curMouseX = event.stageX;			//记录当前鼠标位置，用于判断鼠标的滚动方向。
					directFlag = 0;
					
					if(panel1Job != null){
						panel1Job.close();
						panel1Job = null;
					}
					
					if(iconJob != null){
						iconJob.close();
						iconJob = null;
					}
					
					//application.addEventListener($jf.type.MouseEvent.MOUSE_MOVE,applicationMouseMoveHandler);
					//application.addEventListener($jf.type.MouseEvent.MOUSE_UP, applicationMouseUpHandler);
				}
				*/
			}
			

			
			var scalWidth;
			var scalHeight;
			var scanX;
			var scanY = 0;
			
			function imageClickHandler(event){
				if(Math.abs(directFlag)<10){
				    curPic = event.target;
					curPic.alpha(0);
					
					//计算放大尺寸
					scalWidth = backgroundImageWidth;//curPic.imageWidth() * (backgroundImageHeight / curPic.imageHeight());
					scalHeight = backgroundImageHeight;
					scalX = (application.width() - scalWidth) / 2;
					scalY = 0;
					
					var point = curPic.parent.localToGlobal(new $jf.type.Point(curPic.x(), curPic.y()));
					
					glassPanel.width(application.width());
					glassPanel.height(application.height());
					glassPanel.addEventListener($jf.type.MouseEvent.CLICK,glassPanelClickHandler);
					application.addChild(glassPanel);
					
					contentView.x(scalX);
					contentView.y(scalY);
					contentView.width(scalWidth);
					contentView.height(scalHeight);
					contentView.url("image/open_book.png");
					contentView.alpha(0);
					application.addChild(contentView);
					
					
					btnCloseView.width(64);
					btnCloseView.height(64);
					btnCloseView.x(scalWidth-74);
					btnCloseView.y(5);
					btnCloseView.url("image/list_default_category.png");
					btnCloseView.addEventListener($jf.type.MouseEvent.CLICK,glassPanelClickHandler);
					contentView.addChild(btnCloseView);
					
					picViewer.x(point.x);
					picViewer.y(point.y);
					picViewer.width(curPic.width());
					picViewer.height(curPic.height());
					picViewer.url(curPic.url().replace("_s",""));
					application.addChild(picViewer);
					
					
					var job = new $jf.type.TweenJob(glassPanel);
					job.duration = 0.5;
					job.ease = $jf.type.EaseQuart.easeOut;
					job.from = { alpha: 0 };
					job.to = { alpha: 70 };
					$jf.tween.queue(job);
					
					
					var picJob = new $jf.type.TweenJob(contentView);
					picJob.duration = 0.01;
					picJob.ease = $jf.type.EaseQuart.easeOut;
					picJob.from = { alpha: 0 };
					picJob.to = { alpha: 100 };
					$jf.tween.queue(picJob,0.5);
					
					
					var picJob2 = new $jf.type.TweenJob(picViewer);
					picJob2.duration = 0.5;
					picJob2.ease = $jf.type.EaseQuart.easeIn;
					picJob2.to = { x: scalX, y: scalY, width: scalWidth, height: scalHeight };
					$jf.tween.queue(picJob2);
					
					
					
					var openJob = new $jf.type.TweenJob(picViewer);
					openJob.duration = 0.5;
					openJob.ease = $jf.type.EaseQuart.easeIn;
					openJob.from = { x: scalX, y: scalY, width: scalWidth, height: scalHeight };
					openJob.to = { x: -scalWidth, y: 0, width: scalWidth, height: scalHeight};
					$jf.tween.queue(openJob, 0.5);
					
					
				}
			}

			

			function glassPanelClickHandler(event) {
				glassPanel.removeEventListener($jf.type.MouseEvent.CLICK,glassPanelClickHandler);
				
				var point = curPic.parent.localToGlobal(new $jf.type.Point(curPic.x(),curPic.y()));

				var job = new $jf.type.TweenJob(glassPanel);
				job.addEventListener($jf.type.Event.COMPLETE,hiddenGlassPanelCompleteHandler);
				job.duration = 1.5; 
				job.ease = $jf.type.EaseQuart.easeOut;
				job.from = { alpha: 70 };
				job.to = { alpha: 0 };
				$jf.tween.queue(job);
				
				var closeJob = new $jf.type.TweenJob(picViewer);
				closeJob.duration = 0.5;
				closeJob.ease = $jf.type.EaseQuart.easeIn;
				closeJob.from = { x: -scalWidth, y: 0, width: scalWidth, height: scalHeight };
				closeJob.to = { x: scalX, y: scalY, width: scalWidth, height: scalHeight};
				$jf.tween.queue(closeJob);
				
				
				var picJob = new $jf.type.TweenJob(contentView);
				picJob.duration = 0.01;
				picJob.ease = $jf.type.EaseQuart.easeOut;
				picJob.from = { alpha: 100 };
				picJob.to = { alpha: 0 };
				$jf.tween.queue(picJob,0.6);
				
				var picJob2 = new $jf.type.TweenJob(picViewer);
				picJob2.duration = 0.5;
				picJob2.ease = $jf.type.EaseQuart.easeIn;
				picJob2.to = { x: point.x, y: point.y, width: curPic.width(), height: curPic.height() };
				$jf.tween.queue(picJob2,0.6);
				
			}

			function hiddenGlassPanelCompleteHandler(event) {
				event.target.removeEventListener($jf.type.Event.COMPLETE,hiddenGlassPanelCompleteHandler);
				
				application.removeChild(glassPanel);
				application.removeChild(contentView);
				application.removeChild(picViewer);
				
				curPic.alpha(100);
			}
			
			
			function gotoBookCityClickHandler(event){
				
				bookcityView.x(0);
				bookcityView.y(0);
				bookcityView.width(backgroundImageWidth);
				bookcityView.height(backgroundImageHeight);
				bookcityView.url("image/bookcity_background.png");
				application.addChild(bookcityView);
				layoutBookCityView();
				
				
				var bookShelfOutJob = new $jf.type.TweenJob(backgroundImageView);
				bookShelfOutJob.duration = 0.5;
				bookShelfOutJob.ease = $jf.type.EaseQuart.easeIn;
				bookShelfOutJob.from = { x: 0, y: 0};
				bookShelfOutJob.to = { x: -backgroundImageWidth, y: 0};
				$jf.tween.queue(bookShelfOutJob);
			
				var bookCityInJob = new $jf.type.TweenJob(bookcityView);
				bookCityInJob.duration = 0.5;
				bookCityInJob.ease = $jf.type.EaseQuart.easeIn;
				bookCityInJob.from = { x: backgroundImageWidth, y: 0};
				bookCityInJob.to = { x: 0, y: 0};
				$jf.tween.queue(bookCityInJob);
				
				/*
				bookcityView.x(backgroundImageWidth/2);
				bookcityView.y(backgroundImageHeight/2);
				bookcityView.width(0);
				bookcityView.height(0);
				bookcityView.url("image/bookcity_background.png");
				application.addChild(bookcityView);
				layoutBookCityView();
				
				var bookCityInJob = new $jf.type.TweenJob(bookcityView);
				bookCityInJob.duration = 0.5;
				bookCityInJob.ease = $jf.type.EaseQuart.easeIn;
				bookCityInJob.to = { x: 0, y: 0, width: backgroundImageWidth, height: backgroundImageHeight};
				$jf.tween.queue(bookCityInJob);
				*/
			}
			
			function layoutBookCityView(){
				var btnGobackBookShelf = new ImageView("btnGobackBookShelf");
				btnGobackBookShelf.addEventListener($jf.type.MouseEvent.CLICK,gobackBookShelfClickHandler);
				btnGobackBookShelf.url("image/btn_back_normal.png");
				btnGobackBookShelf.x(5);
				btnGobackBookShelf.y(5);
				btnGobackBookShelf.width(100);
				btnGobackBookShelf.height(54);
				bookcityView.addChild(btnGobackBookShelf);
				
				// list books from bookcity;
				
				bookListView.width(backgroundImageWidth);
				bookListView.height(backgroundImageHeight);
				bookListView.x(50);
				bookListView.y(135);
				layoutListBooksView();
				bookcityView.addChild(bookListView);
				
			}
			
			function gobackBookShelfClickHandler(event){
				
				panelView1.removeAllChild();
				layoutShowBooksView();
				
				var bookShelfInJob = new $jf.type.TweenJob(backgroundImageView);
				bookShelfInJob.duration = 0.5;
				bookShelfInJob.ease = $jf.type.EaseQuart.easeIn;
				bookShelfInJob.from = { x: -backgroundImageWidth, y: 0};
				bookShelfInJob.to = { x: 0, y: 0};
				$jf.tween.queue(bookShelfInJob);
				
				var bookCityOutJob = new $jf.type.TweenJob(bookcityView);
				bookCityOutJob.duration = 0.5;
				bookCityOutJob.ease = $jf.type.EaseQuart.easeIn;
				bookCityOutJob.from = { x: 0, y: 0};
				bookCityOutJob.to = { x: backgroundImageWidth, y: 0};
				$jf.tween.queue(bookCityOutJob);
				
				/*
				var bookCityOutJob = new $jf.type.TweenJob(bookcityView);
				bookCityOutJob.duration = 0.5;
				bookCityOutJob.ease = $jf.type.EaseQuart.easeIn;
				//bookCityOutJob.from = { x: 0, y: 0, width: backgroundImageWidth, height: backgroundImageHeight, alpha:100};
				bookCityOutJob.to = { x: backgroundImageWidth/2, y: backgroundImageHeight/2, width: 0, height: 0, alpha: 0};
				$jf.tween.queue(bookCityOutJob);
				*/
			}
			
			function layoutShowDeleteBookView(){
				var storage = window.localStorage;	
				var bookShelfStr = storage.getItem("bookShelf");
				var booksArr = bookShelfStr.split(',');
				var len = booksArr.length - 1;
				
				var lineCount = parseInt(len/5);
				var column = 0;

				for(var line=0; line <= lineCount; line++){
					if(line == lineCount){
						column = len - (line * 5);
					}else{
						column = 5;
					}
					for(var i=0; i < column; i++){
						var btnX = new ImageView("btnx"+(line * 5 + i));
						btnX.addEventListener($jf.type.MouseEvent.CLICK,deleteBookClickHandler);
						btnX.url("image/button_x.png");
						btnX.x(i * 148+80);
						btnX.y(line * 190-10);
						btnX.width(37);
						btnX.height(37);
						editView.addChild(btnX);
					}
				}    
			}
			
			
			function editBookClickHandler(event){
				isEditModel  = !isEditModel;
				
				if(isEditModel){
					
					editView.width(backgroundImageWidth);
					editView.height(backgroundImageHeight);
					editView.x(50);
					editView.y(135);
					backgroundImageView.addChild(editView);
					layoutShowDeleteBookView();
					
					editBookView.url("image/btn_finish_normal.png");
				}else{
					editBookView.url("image/btn_edit_normal.png");
					backgroundImageView.removeChild(editView);
					
				}
				
			}
			
			
			function deleteBookClickHandler(event){
				var btnDel = event.target;
				var index = btnDel.name().substring(4);
				
				var storage = window.localStorage;
				var bookShelfStr = storage.getItem("bookShelf");
				var bookArr = bookShelfStr.split(',');
				var len = bookArr.length - 1;
				var bookShelfStrNew = '';
				for(var i=0;i<len;i++){
					if(i!=index){
						bookShelfStrNew = bookShelfStrNew + bookArr[i]+",";
					}
				}
				storage.setItem("bookShelf", bookShelfStrNew);
				
				panelView1.removeAllChild();
				layoutShowBooksView();
				
				editView.removeAllChild();
				layoutShowDeleteBookView();
			}
			
			
			function layoutListBooksView(event){
				var storage = window.localStorage;

				var bookCityStr = storage.getItem("bookCity");
				var booksArr = bookCityStr.split(',');
				var len = booksArr.length - 1;
				
				var lineCount = parseInt(len/5);
				var column = 0;
				
				for(var line=0; line <= lineCount; line++){
					if(line == lineCount){
						column = len - (line * 5);
					}else{
						column = 5;
					}
					for(var i=0; i < column; i++){
						var book = new ImageView("bookList"+(line * 5 + i));
						book.url("books/"+booksArr[line * 5 + i]);
						book.x(i * 148);
						book.y(line * 210);
						book.width(106);
						book.height(151);
						bookListView.addChild(book);
						
						var download = new ImageView("download"+(line * 5 + i));
						download.addEventListener($jf.type.MouseEvent.CLICK,downloadBookClickHandler);
						download.url("image/btn_download_normal.png");
						download.x(i * 148 + 9);
						download.y(line * 210 + 158);
						download.width(87);
						download.height(25);
						bookListView.addChild(download);
						
					}
				}    
			}
			
			
			function downloadBookClickHandler(event){
				var btnDownload = event.target;
				var index = btnDownload.name().substring(8);
				
				var storage = window.localStorage;
				var bookCityStr = storage.getItem("bookCity");
				var bookShelfStr = storage.getItem("bookShelf");
				
				var bookCityArr = bookCityStr.split(',');
				var downloadBook = bookCityArr[index];
				
				var hasDownload = bookShelfStr.indexOf(downloadBook);
				var bookShelfStrNew = downloadBook+",";
				
				if(hasDownload >= 0){
					var bookShelfArr = bookShelfStr.split(',');
					var len = bookShelfArr.length - 1;
					for(var i=0;i<len;i++){
						if(downloadBook != bookShelfArr[i]){
							bookShelfStrNew = bookShelfStrNew + bookShelfArr[i] +",";
						}
					}
				}else{
					bookShelfStrNew = bookShelfStrNew + bookShelfStr;
				}
				
				storage.setItem("bookShelf",bookShelfStrNew);
				//alert("下载完成bookShelfStrNew="+bookShelfStrNew+" downloadBook="+downloadBook+"  bookCityStr="+bookCityStr);
				downloadFinishAlert("下载完成");
			}
			
			
			
			//自动关闭提示框
			function downloadFinishAlert(str) {
				var msgw,msgh,bordercolor;
				msgw=350;//提示窗口的宽度
				msgh=80;//提示窗口的高度
				titleheight=25 //提示窗口标题高度
				bordercolor="#336699";//提示窗口的边框颜色
				titlecolor="#99CCFF";//提示窗口的标题颜色
				var sWidth,sHeight;
				//获取当前窗口尺寸
				sWidth = document.body.offsetWidth;
				sHeight = document.body.offsetHeight;
				//    //背景div
				var bgObj=document.createElement("div");
				bgObj.setAttribute('id','alertbgDiv');
				bgObj.style.position="absolute";
				bgObj.style.top="0";
				bgObj.style.background="#E8E8E8";
				bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
				bgObj.style.opacity="0.6";
				bgObj.style.left="0";
				bgObj.style.width = sWidth + "px";
				bgObj.style.height = sHeight + "px";
				bgObj.style.zIndex = "10000";
				document.body.appendChild(bgObj);
				//创建提示窗口的div
				var msgObj = document.createElement("div")
				msgObj.setAttribute("id","alertmsgDiv");
				msgObj.setAttribute("align","center");
				msgObj.style.background="white";
				msgObj.style.border="1px solid " + bordercolor;
				msgObj.style.position = "absolute";
				msgObj.style.left = "50%";
				msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
				//窗口距离左侧和顶端的距离 
				msgObj.style.marginLeft = "-225px";
				//窗口被卷去的高+（屏幕可用工作区高/2）-150
				msgObj.style.top = document.body.scrollTop+(window.screen.availHeight/2)-150 +"px";
				msgObj.style.width = msgw + "px";
				msgObj.style.height = msgh + "px";
				msgObj.style.textAlign = "center";
				msgObj.style.lineHeight ="25px";
				msgObj.style.zIndex = "10001";
				document.body.appendChild(msgObj);
				//提示信息标题
				var title=document.createElement("h4");
				title.setAttribute("id","alertmsgTitle");
				title.setAttribute("align","left");
				title.style.margin="0";
				title.style.padding="3px";
				title.style.background = bordercolor;
				title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
				title.style.opacity="0.75";
				title.style.border="1px solid " + bordercolor;
				title.style.height="18px";
				title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif";
				title.style.color="white";
				title.innerHTML="提示信息";
				document.getElementById("alertmsgDiv").appendChild(title);
				//提示信息
				var txt = document.createElement("p");
				txt.setAttribute("id","msgTxt");
				txt.style.margin="16px 0";
				txt.innerHTML = str;
				document.getElementById("alertmsgDiv").appendChild(txt);
				//设置关闭时间
				window.setTimeout("closewin()",1000); 
			}
			function closewin() {
				document.body.removeChild(document.getElementById("alertbgDiv"));
				document.getElementById("alertmsgDiv").removeChild(document.getElementById("alertmsgTitle"));
				document.body.removeChild(document.getElementById("alertmsgDiv"));
			}
			
		</script>
    </body>
</html>
